<template>
    <view class="container">
		<!--轮播图-->
        <view class="carousel">
            <swiper indicator-dots circular=true duration="400">
				<block v-if="goods.SmallImages && goods.SmallImages.length>0">
					<swiper-item class="swiper-item" v-for="(item,index) in goods.SmallImages" :key="index">
						<view class="image-wrapper">
							<image :src="item" class="loaded" lazy-load mode="aspectFill"></image>
						</view>
					</swiper-item>
				</block>
				
				<block v-else>
					<swiper-item class="swiper-item" v-for="(item,index) in goods.PicList" :key="index">
						<view class="image-wrapper">
							<image :src="item" class="loaded" lazy-load mode="aspectFill"></image>
						</view>
					</swiper-item>
				</block>
            </swiper>
        </view>
		<!--轮播图结束-->
        
        <view class="introduce-section">
            <view class="title">
				<image src='../../static/buytao/tb.png' class="loaded" lazy-load mode="aspectFill" v-if="this.goodstype==1"></image>
				<image src='../../static/buytao/tianmao.png' class="loaded" lazy-load mode="aspectFill" v-if="this.goodstype==2"></image>
				<image src='../../static/buytao/jd.png' class="loaded" lazy-load mode="aspectFill" v-if="this.goodstype==3"></image>
				<image src='../../static/buytao/pdd.png' class="loaded" lazy-load mode="aspectFill" v-if="this.goodstype==4"></image>
				<text>{{goods.Title}}</text>
			</view>
            <view class="price-box">
                <text class="price-tip">¥</text>
                <text class="price">{{goods.EndPrice}}</text>
                <text class="m-price">¥{{goods.Price}}</text>
                <text class="coupon-tip">下单返{{goods.Commission}}</text>
                <text class="coupon-tip">最高返{{goods.MaxCommission}}</text>
            </view>
        </view>
        
        <view class="price-count">{{goods.MonthSale}}人已购买</view>
        
        <view class="coupon-start-time" @click="orderbuy()">
            <view class="coupon-statrt">
                <view class="coupon-left">
                    ￥{{goods.CouponMoney}}
                </view>
                <view class="coupon-middle">
                    <view>优惠券使用期限</view>
                    <view>{{goods.CouponStartTime}}-{{goods.CouponEndTime}}</view>
                </view>
                <view class="coupon-right">
                    立即领劵
                </view>
            </view>
        </view>
        
        <!--  分享 -->
        <view class="share-section" @click="share">
            <view class="share-icon">
                <text class="yticon icon-xingxing"></text>返
            </view>
            <text class="tit">该商品分享赚{{goods.Commission}}</text>
            <text class="yticon icon-bangzhu1"></text>
            <view class="share-btn">
                立即分享
                <text class="yticon icon-you"></text>
            </view>
        </view>

		<view class="productitems">
			<view class="producttitle">
				<text>推荐语</text>
			</view>
			<view class="productdesc">
				<text>{{goods.Suggest}}</text>
			</view>
		</view>
		
		
		
		<view class="productitems opshop">
			<view class="producttitle goodsname">
				<text>{{goods.ShopName}}</text>
				<text>
					<text></text>
					<!-- <text @click="open_shop()" v-if="goods.Site=='haodanku'">打开店铺</text> -->
				</text>
			</view>
		</view>
		
        
        <view class="productitems">
            <view class="producttitle">
                <text>图文详情</text>
            </view>
            <view class="productdesc productdetail" @click="showdetail">
                <view>查看详情<text>V</text></view>
            </view>
            <block v-if="isshowdetail">
				<view class="goods-detail">
					<block v-if="goods.PicList.length != 0">
						<image :src="item" class="loaded" mode="widthFix" v-for="(item,index) in goods.PicList" :key="index"></image>
					</block>
					<block v-else>
						<image :src="item" class="loaded" mode="widthFix" v-for="(item,index) in goods.SmallImages" :key="index"></image>
					</block>
				</view>
            </block>
        </view>
        
		
		
		
		<view class="productitems">
			<view class="producttitle">
				<text>相关推荐</text>
			</view>
			<view class="productdesc">
				<goodsList :dataList="dataList" :index="current"></goodsList>
			</view>
		</view>
		
		
        
        <!-- 底部操作菜单 -->
        <view class="page-bottom">
            <view class="p-b-btn" @click="tokouling()">
				<!-- <text class="yticon icon-shoucang"></text> -->
				<image src='../../static/buytao/kl.png' class="loaded" mode="aspectFill"></image>
                <text>口令</text>
            </view>
            <view class="p-b-btn" @click="toFavorite">
                <!-- <text class="yticon icon-shoucang"></text> -->
				<image src='../../static/buytao/sc.png' class="loaded" mode="aspectFill"></image>
                <text>收藏</text>
            </view>
            
            <view class="action-btn-group">
                <button type="primary" class=" action-btn no-border buy-now-btn" @click="shareclick()">分享赚{{goods.Commission}}</button>
                <button type="primary" class=" action-btn no-border add-cart-btn" @click="orderbuy">购买省{{buysheng}}</button>
            </view>
        </view>
        
        <!-- 分享 -->
        <share 
            ref="share" 
            :contentHeight="580"
            :shareList="shareList"
        ></share>
    </view>
</template>

<script>
	import uniPopup from '../../components/share/uni-popup/uni-popup'
    import shareBtn from '../../components/share/share-btn/share-btn'
	import tools from '../../common/tools.js'
	import apiindex from '../../common/api/index.js'
	import apiuser from '../../common/api/user.js'
    import share from '@/components/share'
	import goodsList from '@/components/goods/goods-list'
    export default{
        components: {
            share,
			apiindex,
			goodsList,
			tools
        },
        data() {
            return {
				current:1,//没用
                specClass: 'none',
                specSelected:[],
                isshowdetail:false,
                favorite: true,
                shareList: [],
				specList: [
				],
				specChildList: [
				],
				
				//接收首页传递过来的参数
				goods_params:{
					goods_id:0,
					site:'haodanku',
				},
				
				//接收后台传递过来的数据
				goods:{},
				goodstype:0,	//商品平台
				related_params:{	//相关商品
					goods_id:'',
				},
				dataList:[],
				
				goods_link:{		//转链相关
					taobaourl:'',		//淘宝转链
					taoword:'',		//淘口令
					turn_url:'',	//转链后的操作
				},
				user_info:{},
				
				buysheng:'',
				
            };
        },
		onShow(){
			tools.is_has_login('hasLogin')
			this.get_user_info()
			this.user_info = tools.get_storage_sync('user_info')
		},
        onLoad(options){
            //接收传值,id里面放的是标题
            this.goods_params.goods_id = options.goods_id
			this.goods_params.site=options.site
			this.goodsdetail(this.goods_params)
        },
        methods:{
			get_user_info(){
				apiuser.get_user({}).then(res => {
					if(res.code == 1){
						tools.set_storage_sync('user_info',res.data)
					}
				}).catch(res => {
					
				})
			},
			
			//商品详情
			goodsdetail(params={}){
				apiindex.goodsdetail(params).then(res => {
					this.goods=res.data
					this.buysheng = (parseFloat(this.goods.CouponMoney) + parseFloat(this.goods.Commission)).toFixed(2)
					this.related_params.goods_id=this.goods.GoodsId
					this.chooseicon(this.goods.ShopType)
					this.related_suggest()
				}).catch(res => {
				　　// 失败进行的操作
				});
			},
			
			//相关推荐
			related_suggest(){
				apiindex.related_suggest(this.related_params).then(res => {
					this.dataList=res.data
				}).catch(res => {
					
				})
			},
			
			//打开店铺
			open_shop(){
				if(this.goods.Site == 'haodanku'){
					if(tools.is_user_appexsit('taobao')){
						tools.tb_openshop(this.goods.ShopId,this.user_info.tb_rid)
					}else{
						uni.showToast({
							title: '未安装淘宝客户端app',
							icon: 'none'
						})
					}
				}
			},
			
			
			//选择展示图片
			chooseicon(platformtype){
				switch(platformtype){
					case '淘宝':
					this.goodstype=1
					break;
					case '天猫':
					this.goodstype=2
					break;
					case '京东':
					this.goodstype=3
					break;
					case '拼多多':
					this.goodstype=4
					break;
					case '唯品会':
					this.goodstype=5
					break;
				}
			},
            
            //展开详情
            showdetail(){
                this.isshowdetail=true;
            },
            
            
            //分享
            share(){
                this.$refs.share.toggleMask();
            },
            
            //收藏
            toFavorite(){
                this.favorite = !this.favorite;
            },
            stopPrevent(){
				
			},			
			/**
			 * 用户去淘宝授权
			 */
			authrid_totaobao(){
				if(typeof this.user_info.tb_rid != 'undefined'){
					if(this.user_info.tb_rid =='' || this.user_info.tb_rid==null){
						apiuser.taobao_auth({}).then(res => {
							if(res.code == 1){
								tools.tb_openh5url(res.data.url)
							}
						}).catch(res => {
							
						});
					}
				}else{
					uni.navigateTo({
						url: '../public/login',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			
			
			
			//淘宝获取转链链接和淘口令
			goods_tb_turn_taoword(){
				return new Promise((resolve, reject) => {
					let turn_params={site:this.goods.Site,goods_id:this.goods.GoodsId}
					apiindex.goods_turn(turn_params).then(res => {
						if(res.code == 1){
							this.goods_link.taobaourl = res.data.url
								let taoword_params={url:this.goods_link.taobaourl,title:this.goods.Title,image:this.goods.PicLogo,goods_id:this.goods.GoodsId}
								apiindex.taoword(taoword_params).then(res => {
									if(res.code == 1){
										this.goods_link.taoword=res.data
										resolve('success')
									}else{
										reject('err')
									}
								}).catch(res => {
										reject('err')
								})
						}else{
							reject('err')
						}
					}).catch(res => {
							reject('err')
					})
				})
			},
			
			
			//拼多多链接
			goods_pdd_turn_taoword(){
				return new Promise((resolve, reject) => {
					let turn_params={site:this.goods.Site,goods_id:this.goods.GoodsId}
					apiindex.goods_turn(turn_params).then(res => {
						if(res.code == 1){
							this.goods_link.taobaourl=res.data.short_url
							this.goods_link.taoword=res.data.url
							this.goods_link.turn_url=this.goods.Site=='haodanku'?res.data.url:res.data.pdd_url
							resolve('success')
						}else{
							reject('err')
						}
					}).catch(res => {
							reject('err')
					})
				})
			},
			
			
			//京东链接
			goods_jd_turn_taoword(){
				return new Promise((resolve, reject) => {
					let turn_params={site:this.goods.Site,goods_id:this.goods.GoodsId,couponurl:this.goods.Couponurl}
					apiindex.goods_turn(turn_params).then(res => {
						if(res.code == 1){
							this.goods_link.taoword=res.data.short_url
							this.goods_link.taobaourl=res.data.url
							this.goods_link.turn_url=res.data.jd_url
							resolve('success')
						}else{
							reject('err')
						}
					}).catch(res => {
							reject('err')
					})
				})
			},
			
			
			
			/**
			 * 获取转链链接，和淘口令 同步请求
			 */
			get_goods_turn_taoword:async function() {
				switch(this.goods_params.site){
					case 'haodanku':
						await this.goods_tb_turn_taoword()
						break;
					case 'pdd':
						await this.goods_pdd_turn_taoword()
						break;
					case 'jd':
						await this.goods_jd_turn_taoword()
						break;
				}
			},
			
			
			
			
			
			/**
			 * 复制口令
			 */
			async tokouling(){
				switch(this.goods.Site){
					case 'haodanku':
						if(this.user_info.tb_rid == '' || this.user_info.tb_rid == 'null' || this.user_info.tb_rid == null){
							this.authrid_totaobao()
						}else{
							if(this.goods_link.taoword == ''){
								await this.get_goods_turn_taoword()
							}
							uni.setClipboardData({
								data: this.goods_link.taoword
							});
						}
						break;
					case 'jd':
						if(this.goods_link.taobaourl == ''){
							await this.get_goods_turn_taoword()
						}
						uni.setClipboardData({
							data: this.goods_link.taoword
						});
						break;
						
					case 'pdd':
						if(this.goods_link.taobaourl == ''){
							await this.get_goods_turn_taoword()
						}
						uni.setClipboardData({
							data: this.goods_link.taoword
						});
						break;
					
					case 'vph':
					
						break;
				}
			},
			
			
			/**
			 * 分享
			 */
			async shareclick(){
				let goods_hparams=''
				switch(this.goods.Site){
					case 'haodanku':
						if(this.user_info.tb_rid == '' || this.user_info.tb_rid == 'null' || this.user_info.tb_rid == null){
							this.authrid_totaobao()
						}else{
							uni.showLoading()
							if(this.goods_link.taobaourl == '' || this.goods_link.taoword == ''){
								await this.get_goods_turn_taoword()
							}
							goods_hparams = encodeURIComponent(JSON.stringify({goods_id:this.goods_params.goods_id,site:this.goods_params.site,goods_link:this.goods_link.taoword}))
							uni.navigateTo({									
								url:"./share?goods_params="+goods_hparams
							})
							uni.hideLoading()
						}
						break;
					case 'jd':
						uni.showLoading()
						if(this.goods_link.taobaourl == ''){
							await this.get_goods_turn_taoword()
						}
						goods_hparams = encodeURIComponent(JSON.stringify({goods_id:this.goods_params.goods_id,site:this.goods_params.site,goods_link:this.goods_link.taoword}))
						uni.navigateTo({									
							url:"./share?goods_params="+goods_hparams
						})
						uni.hideLoading()
						break;
						
					case 'pdd':
						uni.showLoading()
						if(this.goods_link.turn_url == ''){
							await this.get_goods_turn_taoword()
						}
						goods_hparams = encodeURIComponent(JSON.stringify({goods_id:this.goods_params.goods_id,site:this.goods_params.site,goods_link:this.goods_link.taobaourl}))
						uni.navigateTo({									
							url:"./share?goods_params="+goods_hparams
						})
						uni.hideLoading()
						break;
					
					case 'vph':
					
						break;
				}
			},
			
			/**
			 * 获取去第三方购买
			 */
			async orderbuy(){
				switch(this.goods.Site){
					case 'haodanku':
						if(this.user_info.tb_rid == '' || this.user_info.tb_rid == 'null' || this.user_info.tb_rid == null){
							this.authrid_totaobao()
						}else{
							uni.showLoading()
							if(this.goods_link.taobaourl == ''){
								await this.get_goods_turn_taoword()
							}
							if(tools.is_user_appexsit('taobao')){
								tools.tb_openurl(this.goods_link.taobaourl,this.user_info.tb_rid)
							}else{
								plus.runtime.openURL(this.goods_link.taobaourl)
							}
						}
						break;
					case 'pdd':
						uni.showLoading()
						if(this.goods_link.turn_url == undefined || this.goods_link.turn_url == ''){
							await this.get_goods_turn_taoword()
						}
						if(tools.is_user_appexsit('pdd')){
							plus.runtime.openURL(this.goods_link.turn_url)
						}else{
							plus.runtime.openURL(this.goods_link.taobaourl)
						}
						break;
					case 'jd':
						if(this.goods_link.taobaourl == ''){
							await this.get_goods_turn_taoword()
						}
						if(tools.is_user_appexsit('jd')){
							let jdData={
								category:'jump',
								des:'getCoupon',
								url:this.goods_link.taobaourl,//this.goods.Couponurl,
							}
							plus.runtime.openURL(
								'openApp.jdMobile://virtual?params='+JSON.stringify(jdData),
								function(err){
									console.log(err,'err')
								},
								'com.jingdong.app.mall',
							)
						}else{
							plus.runtime.openURL(this.goods_link.taobaourl)
						}
						break;
					case 'vph':
					
						break;
				}
				uni.hideLoading()
			},
        },
    }
</script>

<style lang='scss'>
	page{
		overflow-x: hidden;
	}
	/**推荐语**/
	.productitems{
		width:100%;
		background-color:#FFFFFF;
		margin:20upx auto;
		padding:20upx 0;
	}
	
	.producttitle{
		width:95%;
		height:40upx;
		line-height:40upx;
		margin:0 auto;
		border-left:20upx solid #FF3333;
	}
	.producttitle>text{
		padding-left:20upx;
		font-size:30upx;
		font-weight:bold;
	}
	.opshop{
		display: flex;
		justify-content: space-between;
	}
	.goodsname{
		display: flex;
		justify-content: space-between;
	}
	.goodsname>text:last-child{
		color:#FF3333;
		font-size:25upx;
		padding-right:20upx;
	}
	
	.productdesc{
		width: 94%;
		margin:0 auto;
	}
	
	/**推荐结束**/
	
    
    /**详情开始**/
	.goods-detail{
		width:100%;
		margin:0 auto;
	}
	.productdetail{
		text-align:center;
	}
	.productdetail>view{
		width:100%;
		height:50upx;
		line-height:50upx;
	}
	.productdetail>view>text{
		display:inline-block;
		height:40upx;
		width:40upx;
		line-height: 40upx;
		background-color:#FFC0CB;
		border-radius:20upx;
		margin-left:20upx;
		color:#FFFFFF;
	}
	.goods-detail>image{
		width:100%;
	}
    /**详情结束**/
    
    
    
    /**优惠券**/
	.p-b-btn>image{
		width:35upx;
		height:35upx;
	}
    .coupon-start-time{
        width:100%;
        height: 180upx;
        background:#FFFFFF;
    }
    
    .coupon-statrt{
        width:95%;
        height:150upx;
        background:#FFC0CB;
        margin:0 auto;
        display: flex;
        flex-direction: row;
        white-space: nowrap;
        justify-content:left;
        flex-wrap:wrap;
        border-radius:20upx;
    }
    .coupon-left{
        width:20%;
        height:150upx;
        color:#FF3333;
        font-size:45upx;
        font-weight:bold;
        line-height:150upx;
        padding-left:5%;
    }
    .coupon-middle{
        width: 50%;
        height:150upx;
        margin-top:20upx;
    }
	.coupon-middle>view:first-child{
		font-weight:bold;
	}
    .coupon-middle>view{
        font-size:30upx;
        color:#FF3333;
    }
    .coupon-right{
        width:20%;
        height:150upx;
        line-height:150upx;
        color:#FF3333;
        font-weight:bold;
        font-size:30upx;
        border-top-left-radius:30upx;
        border-bottom-left-radius:30upx;
        border-left:5upx solid #FFC0CB;
        box-shadow:-2px 0 3px -1px #FF3333;
        padding-left:4%;
    }
    /***优惠券结束*/
    
    .price-count{
        width:99%;
        height:80upx;
        line-height:80upx;
        padding-left:1%;
        color:#CCCCCC;
        background-color:#FFFFFF;
        
    }
    page{
        background: $page-color-base;
        padding-bottom: 160upx;
    }
    .icon-you{
        font-size: $font-base + 2upx;
        color: #888;
    }
    .carousel {
        height: 722upx;
        position:relative;
        swiper{
            height: 100%;
        }
        .image-wrapper{
            width: 100%;
            height: 100%;
        }
        .swiper-item {
            display: flex;
            justify-content: center;
            align-content: center;
            height: 750upx;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
        
    }
    
    /* 标题简介 */
    .introduce-section{
        background: #fff;
        padding: 0 30upx;   
        padding-top:20upx;      
        .title{
            font-size: 32upx;
            color: $font-color-dark;
            font-weight:bold;
			image{
				width:40upx;
				height:40upx;
				position: relative;
				top:10upx;
				padding-right:5upx;
			}
        }
        .price-box{
            display:flex;
            align-items:baseline;
            height: 64upx;
            padding: 10upx 0;
            font-size: 26upx;
            color:$uni-color-primary;
        }
        .price{
            color:#FF3333;
            font-size:40upx;
            font-weight:bold;
        }
        .m-price{
            margin:0 12upx;
            color: $font-color-light;
            text-decoration: line-through;
        }
        .coupon-tip{
            align-items: center;
            padding: 4upx 10upx;
            background: $uni-color-primary;
            font-size: $font-sm;
            color: #fff;
            border-radius: 6upx;
            line-height: 1;
            transform: translateY(-4upx);
			margin-left:10upx;
        }
        .bot-row{
            display:flex;
            align-items:center;
            height: 50upx;
            font-size: $font-sm;
            color: $font-color-light;
            text{
                flex: 1;
            }
        }
    }
    
    
    /* 分享 */
    .share-section{
        display:flex;
        align-items:center;
        color: $font-color-base;
        background: linear-gradient(left, #fdf5f6, #fbebf6);
        padding: 12upx 30upx;
        .share-icon{
            display:flex;
            align-items:center;
            width: 70upx;
            height: 30upx;
            line-height: 1;
            border: 1px solid $uni-color-primary;
            border-radius: 4upx;
            position:relative;
            overflow: hidden;
            font-size: 22upx;
            color: $uni-color-primary;
            &:after{
                content: '';
                width: 50upx;
                height: 50upx;
                border-radius: 50%;
                left: -20upx;
                top: -12upx;
                position:absolute;
                background: $uni-color-primary;
            }
        }
        .icon-xingxing{
            position:relative;
            z-index: 1;
            font-size: 24upx;
            margin-left: 2upx;
            margin-right: 10upx;
            color: #fff;
            line-height: 1;
        }
        .tit{
            font-size: $font-base;
            margin-left:10upx;
        }
        .icon-bangzhu1{
            padding: 10upx;
            font-size: 30upx;
            line-height: 1;
        }
        .share-btn{
            flex: 1;
            text-align:right;
            font-size: $font-sm;
            color: $uni-color-primary;
        }
        .icon-you{
            font-size: $font-sm;
            margin-left: 4upx;
            color: $uni-color-primary;
        }
    }
    
    .c-list{
        font-size: $font-sm + 2upx;
        color: $font-color-base;
        background: #fff;
        .c-row{
            display:flex;
            align-items:center;
            padding: 20upx 30upx;
            position:relative;
        }
        .tit{
            width: 140upx;
        }
        .con{
            flex: 1;
            color: $font-color-dark;
            .selected-text{
                margin-right: 10upx;
            }
        }
        .bz-list{
            height: 40upx;
            font-size: $font-sm+2upx;
            color: $font-color-dark;
            text{
                display: inline-block;
                margin-right: 30upx;
            }
        }
        .con-list{
            flex: 1;
            display:flex;
            flex-direction: column;
            color: $font-color-dark;
            line-height: 40upx;
        }
        .red{
            color: $uni-color-primary;
        }
    }
    /**分享结束**/
    
    
    /* 底部操作菜单 */
    .page-bottom{
        position:fixed;
        left: 0;
        bottom:0;
        z-index: 95;
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height: 100upx;
        background: rgb(255,255,255);
        box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
        border-top-left-radius: 16upx;
        border-top-right-radius: 16upx;
        
        .p-b-btn{
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: $font-sm;
            color: $font-color-base;
            width: 96upx;
            height: 80upx;
            .yticon{
                font-size: 40upx;
                line-height: 48upx;
                color: $font-color-light;
            }
            &.active, &.active .yticon{
                color: $uni-color-primary;
            }
            .icon-fenxiang2{
                font-size: 42upx;
                transform: translateY(-2upx);
            }
            .icon-shoucang{
                font-size: 46upx;
            }
        }
        .action-btn-group{
            display: flex;
            height: 76upx;
            border-radius: 100px;
            overflow: hidden;
            box-shadow: 0 20upx 40upx -16upx #fa436a;
            box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
            background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
            margin-left: 20upx;
            position:relative;
            &:after{
                content: '';
                position:absolute;
                top: 50%;
                right: 50%;
                transform: translateY(-50%);
                height: 28upx;
                width: 0;
                border-right: 1px solid rgba(255,255,255,.5);
            }
            .action-btn{
                display:flex;
                align-items: center;
                justify-content: center;
                width: 230upx;
                height: 100%;
                font-size: $font-base ;
                padding: 0;
                border-radius: 0;
                background: transparent;
            }
        }
    }
    
</style>
